<template>
  <div class="popover" @click="handleUserInfo">
    <el-popover :width="320"
      popper-style="box-shadow: rgb(14 18 22 / 35%) 0px 10px 38px -10px, rgb(14 18 22 / 20%) 0px 10px 20px -15px; padding: 20px;">
      <template #reference>
        <el-avatar :size="40" :src="circleUrl" />
      </template>
      <template #default>
        <!-- 展示用户基本信息 -->
        <div class="basic-info">
          <div>
            账号状态: <el-tag class="ml-2" type="danger" v-if="false">未认证</el-tag>
            <el-tag class="ml-2" type="success" v-else>已认证</el-tag>
          </div>
          <div>
            用户名: <span>{{ userInfo.username }}</span>
          </div>
          <div>
            用户昵称: <span>{{ userInfo.nickname }}</span>
          </div>
          <div>
            邮箱: <span>{{ userInfo.email }}</span>
          </div>
        </div>
        <el-divider />
        <!-- 展示用户数据 -->
        <div class="user-data">
          <div>
            <el-icon>
              <Money />
            </el-icon>钱包: <span>{{ userInfo.money }}</span>
          </div>
          <div>
            <el-icon>
              <Coin />
            </el-icon>信用点: <span>{{ userInfo.credit }}</span>
          </div>
          <div>
            <el-icon>
              <MessageBox />
            </el-icon>发布项目数: <span>{{ userInfo.project_num }}</span>
          </div>

        </div>
        <el-divider />
        <!-- 用户快捷操作 -->
        <div class="user-btnlist">
          <el-button @click="handleUserInfo">个人中心</el-button>
          <el-button @click="handlePublishProject">发布项目</el-button>
          <el-button @click="handlePublishEntrust">发布委托</el-button>
          <el-button @click="handlePublishCommunication">发布交流贴</el-button>
          <el-button @click="handleLogout">退出登录</el-button>
        </div>
      </template>
    </el-popover>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, toRefs, onMounted, nextTick, defineAsyncComponent } from "vue"
import { useRoute, useRouter } from "vue-router"
import {
  Money,
  Coin,
  MessageBox,
  CloseBold,
} from '@element-plus/icons-vue'
import Service from "@/utils/axios"
import { useUserStore } from '@/store/user'
const useUser = useUserStore();
const route = useRoute();
const router = useRouter();


let userInfo: any = {};


// 头像
const baseUrl = `http://127.0.0.1:3000`;
const centerUrl = `\\uploads`;
const state = reactive<any>({
  aratarUrl: `\\avatar\\default_svg.svg`, // 头像url默认值
  circleUrl: ``,
  // 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
})
const { circleUrl } = toRefs(state)

// 请求头像方法
const handleGetAvator = () => {
  // 获取头像url拼接
  const localAvatarUrl = localStorage.getItem('avatarUrl')
  // console.log('old', state.aratarUrl)
  state.aratarUrl = localAvatarUrl ? localAvatarUrl : state.aratarUrl;
  // console.log('new', state.aratarUrl)
  state.circleUrl = `${baseUrl}${centerUrl}${state.aratarUrl}`
  // console.log('state.circleUrl', state.circleUrl)
}

// Popover btnList
// 个人中心
const handleUserInfo = () => {
  console.log('个人中心')
  router.push({
    name: 'UserInfoView',
  })
}
// 发布项目
const handlePublishProject = () => {
  console.log('发布项目')
}
// 发布委托
const handlePublishEntrust = () => {
  console.log('发布委托')
}
// 发布交流贴
const handlePublishCommunication = () => {
  console.log('发布交流贴')
}
// 退出登录
const handleLogout = () => {
  console.log('退出登录');
  localStorage.removeItem('token');
  localStorage.removeItem('username');
  localStorage.removeItem('userinfo');
  useUser.clearUserName();
  useUser.clearToken();
  useUser.clearAvatarUrl();
  useUser.clearUserInfo();
  router.go(0);
}

onMounted(async () => {
  // 请求头像
  handleGetAvator();
  // 获取用户信息
  try {
    userInfo = await reactive((JSON.parse(useUser.userInfo)));
  } catch (error) {
    console.log('error', error)
  }
})
</script>

<style lang="less" scoped>
@border-color: #dcdfe6; //边框默认颜色


.basic-info {
  height: 70px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;

  div {
    span {
      font-weight: 700;
    }
  }
}

.user-data {
  display: flex;
  justify-content: space-between;

  div {
    span {
      font-weight: 700;
    }
  }
}

.user-btnlist {
  display: flex;
  flex-direction: column;

  :deep(.el-button) {
    color: #61666d;
    font-weight: 700;
  }

  :deep(.el-button + .el-button) {
    margin-left: 0;
    margin-top: 10px;
  }
}
</style>